<template>
  <up-navbar bgColor="#fff">
    <template #left>
      <view></view>
    </template>
    <template #center>
      <view class="u-f-sxl">快乐星球</view>
    </template>
    <template #right>
      <view class="tag">创建</view>
    </template>
  </up-navbar>

  <!-- 固定在顶部的搜索框 -->
  <view class="fixed-search">
    <up-search
        shape="square"
        :showAction="false"
        placeholder="搜索星球、用户或内容"
        bgColor="#f7f7f7"
        borderColor="#f7f7f7"
    ></up-search>
  </view>
  <scroll-view style="height: 100vh" scroll-y="true" show-scrollbar="false" @scrolltolower="loadMore"
               lower-threshold="100">
    <!-- 内容区域 -->
    <view class="content-container">
      <view class="content-wrapper" style="display: grid;grid-template-columns: repeat(2, 1fr);gap:20rpx">
        <!-- 内容区 -->
        <view class="content-item" v-for="i in count" :key="i" @click="toPath(`/planet/detail/detail?id=${i}`)">
          <up-image shape="square" radius="12rpx" :show-loading="true"
                    :src="`https://picsum.photos/id/${i+1}/200/300?random=${i}`" width="100%"
                    height="320rpx"></up-image>
          <view style="padding: 20rpx">
            <view class="text-1">{{ `https://picsum.photos/id/${i + 1}/200/300?random=${i}` }}</view>
            <view class="flex-between u-f-sm" style="color:#333">
              <view>咋阿斯蒂芬</view>
              <view>
                <up-avatar shape="square" size="20"
                           :src="`https://picsum.photos/id/${i+1}/200/300?random=${i}`"></up-avatar>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
  <a-menu/>
</template>

<script setup>
import {toPath} from "@/util/router/router";
import {ref} from "vue";

const count = ref(10)

const loadMore = () => {
  count.value += 10
}
</script>

<style scoped lang="scss">
@import "@/static/css/index.css";
/* 全局样式 */
page {
  background-color: #f7f7f7;
}

/* 固定搜索框样式 */
.fixed-search {
  position: sticky;
  z-index: 99;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;

  /* 多平台适配 */
  // #ifdef H5
  top: 44px; /* H5导航栏高度 */
  // #endif

  // #ifdef MP-WEIXIN || APP
  top: 130rpx; /* 小程序/APP导航栏高度 */
  // #endif
}

/* 内容区域样式 */
.content-container {
  height: calc(100vh - var(--total-fixed-height));
  overflow: hidden;
  // #ifdef H5
  margin-top: 88rpx; /* H5导航栏高度 */
  // #endif
  // #ifdef MP-WEIXIN || APP
  margin-top: 130rpx; /* 小程序/APP导航栏高度 */
  // #endif
  background-color: #f7f7f7;
}

.content-wrapper {
  height: 100%;
  overflow-y: auto;
  padding: 20rpx;
  padding-bottom: 40rpx;
  box-sizing: border-box;
}

.content-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #f7f7f7;
  overflow: hidden; /* 新增：防止内容溢出 */
  box-shadow: 0 0 20rpx rgb(199, 199, 199);
}


/* 定义CSS变量用于高度计算 */
:root {
  // #ifdef H5
  --total-fixed-height: 44px+80rpx; /* H5导航栏+搜索框高度 */
  // #endif

  // #ifdef MP-WEIXIN || APP
  --total-fixed-height: 130rpx+80rpx; /* 小程序/APP导航栏+搜索框高度 */
  // #endif
}

.tag {
  font-size: 24rpx;
  color: #333;
}
</style>